<template>
  <div class="arraySection">
    <el-table :data="tableData" border>
      <el-table-column prop="key" label="标签">
        <template #default="scope">
          <el-popover placement="right-start" width="300" trigger="click" popper-class="conditionScreenPopover"
            @show="textarea = scope.row.key">
            <div class="update-value">
              <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
              <div class="button-group">
                <el-button size="small" @click="updateValue()">取消</el-button>
                <el-button type="primary" size="small" @click="updateValue(scope, 'key')">确定</el-button>
              </div>
            </div>
            <template #reference>
              <el-link type="primary">{{ scope.row.key || questionMark }}</el-link>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="min" label="最小">
        <template #default="scope">
          <el-popover placement="bottom-start" width="300" trigger="click" popper-class="conditionScreenPopover"
            @show="textarea = scope.row.min">
            <div class="update-value">
              <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
              <div class="button-group">
                <el-button size="small" @click="updateValue()">取消</el-button>
                <el-button type="primary" size="small" @click="updateValue(scope, 'min')">确定</el-button>
              </div>
            </div>
            <template #reference>
              <el-link type="primary">{{ scope.row.min || questionMark }}</el-link>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="max" label="最大">
        <template #default="scope">
          <el-popover placement="bottom-start" width="300" trigger="click" popper-class="conditionScreenPopover"
            @show="textarea = scope.row.max">
            <div class="update-value">
              <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
              <div class="button-group">
                <el-button size="small" @click="updateValue()">取消</el-button>
                <el-button type="primary" size="small" @click="updateValue(scope, 'max')">确定</el-button>
              </div>
            </div>
            <template #reference>
              <el-link type="primary">{{ scope.row.max || questionMark }}</el-link>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template #default="scope">
          <el-button type="text" size="small" @click="deleteRow(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="add-row-button" type="primary" @click="addRow()">增加</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted} from "vue"
import { questionMark } from 'src/utils/designerTool/constants'
const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const tableData = ref(<any>[])
const addIndex = ref(0)
const textarea = ref('')
onMounted(()=>{
  init()
})
    function init() {
      if (props.params?.data && Array.isArray(props.params.data)) {
        tableData.value = props.params.data
      }
    }
    function saveCommit() {
      return {
        node: tableData.value,
        form: tableData.value
      }
    }
    function addRow() {
      tableData.value.push({
        key: '',
        min: '',
        max: ''
      })
      addIndex.value++
    }
    function deleteRow(scope:any) {
      tableData.value.splice(scope.$index, 1)
    }
    function popoverClose() {
      document.body.click()
    }
    function updateValue(scope:any, key:any) {
      if (scope) {
        tableData.value[scope.$index].key=textarea.value
      }
      popoverClose()
      textarea.value = ''
    }
</script>

<style lang="scss" scoped>
.arraySection {
  .add-row-button {
    margin-top: 10px;
  }
}

.update-value {
  .button-group {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
